<template>
  <view v-if="showQuestion">
    <view class="question-pop-box">
      <!-- 问卷 -start -->
      <view class="question-pop-info">
        <view @click="closePop()" class="question-close">
          <uni-icons color= "#D8D8D8" type="closeempty" size="30"></uni-icons>
        </view>
        <image class="question-top-img" src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/video/question_top_bg.png"></image>
        <view v-if="questionType === 1" class="question-main-box">
          <view v-for="(item,index) in allData">
            <view class="question-title">{{index+1}}.{{item.questionJson.topic}}</view>
            <!-- 两个选项 -->
            <view v-if="item.questionJson.options.length === 2 && item.questionJson.type == 0" class="question-select-box">
              <view v-for="(item2,index2) in item.questionJson.options" @click="selectAnswer(index,index2,item2.optionKey)" class="question-select-item">
                <image v-if="allData[index].questionJson.customerAnswer === item2.optionKey" class="question-select-img" src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/video/icon_into.png"></image>
                <view v-else class="question-select-icon"></view>
                <view class="question-select-text">{{item2.optionVal}}</view>
              </view>
            </view>
            <!-- 两个以上选项 -->
            <view v-if="item.questionJson.options.length > 2 && item.questionJson.type == 0" class="question-select-box-column">
              <view v-for="(item2,index2) in item.questionJson.options" @click="selectAnswer(index,index2,item2.optionKey)" class="question-select-item question-select-column">
                <image v-if="allData[index].questionJson.customerAnswer === item2.optionKey" class="question-select-img" src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/video/icon_into.png"></image>
                <view v-else class="question-select-icon"></view>
                <view class="question-select-text">{{item2.optionVal}}</view>
              </view>
            </view>
            <!-- 表单填写 -->
            <view v-if="item.questionJson.type == 2" class="question-select-box">
              <view class="question-input-box">
                <view class="question-input-box-input">
                  <input @blur="submitData()" v-model="allData[index].questionJson.customerAnswer" class="uni-input" type="number" placeholder="请输入" />
                </view>
                <view class="question-input-unit"></view>
              </view>
            </view>
          </view>
        </view>
        <!-- 问卷 -end -->
        <view @click="toSubmit()" class="question-button-box">
          <image class="question-button" src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/video/tab_yaoqing.png"></image>
        </view>
      </view>
    </view>
    <view class="zhezhao"></view>
  </view>
</template>
<script>
export default {
		name:"question_pop",
		props:[],
		data() {
			return {
				showQuestion:false,
				questionType:1, // 问题类型  1 新人问卷 2 复购用户问卷
				allData: {}, // 问卷列表
			};
		},
		created() {
			// this.getPickupInfo()
			this.getQuestionInfo()
		},
		methods:{
			// 选择答案
			selectAnswer(index,index2,value){
				let _this = this
				this.$nextTick(function () {
					_this.allData[index].questionJson.customerAnswer = value
					_this.submitData()
				})
			},
			// 获取题目信息
			getQuestionInfo() {
				var that = this;
				that.$javaApiTag.doRequest("get","/tag/bigSales/getQuestionDetail",{},'json').then(res=>{
					if(res.data.code == 0){
						let tempList = res.data?.data?.questionList || []
						// 格式化数据
						for(let i = 0; i<tempList.length;i++){
							tempList[i]['questionJson'] = JSON.parse(tempList[i]['questionJson'])
							if(tempList[i]['questionJson'].type === 2){
								tempList[i]['questionJson'].options = []
							}
						}
						this.allData = tempList
						this.showQuestion = true
						console.log(this.allData)
					}
				})
			},
			// 提交答案
			submitData() {
				var that = this;
				// 格式化数据
				let postData = {}
				postData.questionnaireId = this.allData[0].questionnaireId
				let tempAnswer = []
				for(let i = 0; i<this.allData.length;i++){
					if(this.allData[i]['questionJson'].customerAnswer){
						tempAnswer.push(this.allData[i]['questionJson'].customerAnswer)
					}
				}
				postData.answer = tempAnswer.join(",")
				that.$javaApiTag.doRequest("post","/tag/bigSales/customerAnswer?questionnaireId="+postData.questionnaireId+"&answer="+postData.answer,postData,'json').then(res=>{

				})
			},
			// 点击提交
			toSubmit(){
				for(let i = 0; i<this.allData.length;i++){
					if(!this.allData[i]['questionJson'].customerAnswer){
						uni.showToast({title:'请先选择答案',icon:"none",duration:3000})
						return
					}
				}
				uni.showToast({title:'提交成功',icon:"none",duration:5000})
				this.submitData()
				this.closePop()
			},
			// 关闭弹窗
			closePop(){
				this.showQuestion = false
			},
		}
	}
</script>

<style scoped>
.zhezhao{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}
.question-pop-box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.question-close{
  color: #D8D8D8;
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  z-index: 10002;
}
.question-pop-info{
  width: 670rpx;
  /* height: 937rpx; */
  background: #FFFFFF;
  border-radius: 18rpx;
  position: relative;
}
.question-top-img{
  width: 670rpx;
  height: 180rpx;
}
.question-main-box{
  padding: 30rpx 30rpx 0 30rpx;
}
.question-title{
  font-size: 46rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 65rpx;
}
.question-select-box{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10rpx 0 30rpx 0;
}
.question-select-box-column{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10rpx 0 30rpx 0;
}
.question-select-column{
  width:305rpx;
  line-height: 80rpx;
}
.question-select-item{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.question-select-icon{
  width: 43rpx;
  height: 43rpx;
  border-radius: 50%;
  border: 4rpx solid #CCCCCC;
  margin-right: 11rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.question-select-icon view{
  width: 27rpx;
  height: 27rpx;
  border-radius: 50%;
  background-color: #24B465;
}
.question-select-text{
  font-size: 46rpx;
  color: #666666;
}
.question-input-box{
  display: flex;
  align-items: center;
  justify-content: center;
}
.question-input-box-input{
  width: 400rpx;
  height: 106rpx;
  line-height:106rpx;
  text-align: center;
  background: #FAFAFA;
  border-radius: 16rpx;
  border: 2rpx solid #DEDEDE;
  font-size: 46rpx;
}
.question-input-box-input input{
  height: 102rpx;
}
.question-input-unit{
  font-size: 46rpx;
  color: #666666;
  padding: 20rpx;
}
.question-button-box{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 30rpx;
}
.question-button{
  width: 644rpx;
  height: 136rpx;
}
.question-select-img{
  width: 45rpx;
  height: 45rpx;
  margin-right: 11rpx;
}
</style>
